<template>
  <div class="item">
    <div class="left">
      <img class="item-img1" src="https://m.only.cn/images/common/1.png" v-if="isShow" @click='jump'/>
      <mt-button
        class="returnButton"
        type="primary"
        @click="returnPage"
        v-else
      >
        返回
      </mt-button>
    </div>
    <img class="item-img2" src="https://cdn.bestseller.com.cn/assets/h5/ONLY/image/logo-rect.png"/>
    <!-- <mt-search
      cancel-text="取消"
      placeholder="搜索"
      class="item-search"
    ></mt-search> -->
    <div class="right">
      <span @click="toggleCityPickerVisible" v-if="this.$route.path === '/setting'">{{address.addressCity}}</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'mint-ui'
import {
  mapState,
  mapMutations
} from 'vuex'
Vue.component(Search)

export default {
  name: 'Header',
  data () {
    return {
      isShow: true
    }
  },
  watch: {
    $route (now, old) { // 监控路由变换，控制返回按钮的显示
      if (now.path === '/detail') {
        this.isShow = false
      } else {
        this.isShow = true
      }
    }
  },
  methods: {
    returnPage () {
      this.$router.push('/mall')
    },
    jump () {
      this.$router.push('/mall1')
    },
    ...mapMutations(['toggleCityPickerVisible'])
  },
  computed: {
    ...mapState(['address'])
  }
}
</script>

<style lang='scss' scoped>
  .item{
    height: 52px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    // border-bottom: 1px solid #dedede;
    .left,
    .right {
      width: 20%;
    }
    .center {
      flex: 1;
    }
    &-img1{
      width: 31px;
      height: 20px;
    }
    &-img2{
      height: 52px;
    }
}
</style>

<style lang="scss">
  .returnButton {
    font-size: 14px;
    height: 25px;
    margin-left: 5px;
  }
</style>
